<template>
  <div class="progress">
    <van-progress
      :percentage="getValue(orderStatus)"
      :inactive="getValue(orderStatus) === 0"
      :color="color ? color : '#1989fa'"
      stroke-width="8"
    ></van-progress>
    <div class="nowProgress">
      <slot name="progressText"></slot>
      <span class="progressTips" v-text="getStatusText"></span>
    </div>
  </div>
</template>

<script>
import { Progress } from 'vant';
import 'vant/lib/progress/style/less';

export default {
    props: {
        orderStatus: {
            type: Number,
            required: true
        },
        color: {
            type: String,
            required: false
        }
    },
    name: 'order-progress',
    components: {
        [Progress.name]: Progress
    },
    computed: {
        getValue () {
            return function (value) {
                let tag = 0;
                switch (value) {
                    case 1:
                        tag = 0;
                        break;
                    case 2:
                        tag = 30;
                        break;
                    case 3:
                        tag = 90;
                        break;
                    case 4:
                        tag = 100;
                        break;
                }
                return tag;
            };
        },
        getStatusText () {
            const statusElement = ['等待接单', '正在跑腿', '完成跑腿', '交易完成'];
            return statusElement[this.orderStatus - 1];
        }
    }
};
</script>

<style scoped lang="less">
.progress {
  padding: 4px 10px;
  width: 100%;
  box-sizing: border-box;
  .nowProgress {
    padding: 10px 0;
    display: flex;
    font-size: 12px;
    .progressName {
      color: #1989fa;
    }
    .progressTips {
      font-weight: bolder;
    }
  }
}
</style>
